<template>
  <div>

    <div> <div class="progress" v-if="this.i!=0"><el-progress :text-inside="true" :stroke-width="26" :percentage="num_progress"></el-progress></div>
      <div class="progress" v-else><el-progress :text-inside="true" :stroke-width="26" :percentage="num_progress_1"></el-progress></div></div>
    <div class="mid">
      <div class="lable">{{gride}}</div>
      <div class="word">{{word}}</div>
      <div><span class="tip">词性：</span><span class="mean" style="color: #3F5EFB">{{part}}</span></div>
      <div class="selection"><div><span class="tip">词义1：</span><span class="mean">{{mean}}</span> </div>
        <div><span class="tip">词义2：</span><span class="mean">{{mean2}}</span> </div>
        <div><span class="tip">词义3：</span><span class="mean">{{mean3}}</span></div></div>
      <el-button @click="aload" type="danger" size="medium" class="el-button">Next</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "word_learn",
  data() {
    return {
      tableData: [],
      total:"",
      word: "",
      mean: "",
      mean2:"",
      mean3:"",
      gride:"",
      part: "",
      num_progress_1:"",
      i:0,
      form: {},
      num_progress:0,
      success_num:1
    }
  },

  methods: {
    open1() {
      this.$notify({
        title: '恭喜！',
        message: '您已经背完了'+this.success_num+'遍单词',
        type: 'success'
      });
    },

    aload(){
      if (this.i+1===this.total){
        this.i=0
      }else{
        this.i++
      }
      this.load()
      console.log(this.i)
      console.log(this.total)
      this.num_progress=((this.i+1)/this.total)*100
      console.log(this.num_progress)
      if (this.num_progress===100){
        this.open1()
        this.success_num++
      }
    },
    load(){
      const i = this.i;
      this.request.get("/word/unWord/"+ 0).then(res => {
        console.log(res)
        this.tableData = res.data
        this.word=res.data[i].word
        this.mean=res.data[i].mean
        this.gride=res.data[i].gride
        this.part=res.data[i].part
        this.mean2=res.data[i].mean2
        this.mean3=res.data[i].mean3
        this.total = res.data.length
        this.num_progress_1=(1/ this.total)*100
        console.log(this.num_progress_1)
      })
    },
  },
  created() {
    this.load()
  },
}

</script>

<style scoped>
.lable{
  background-color: #409EFF;
  color: white;
  margin: 5px auto;
  width: 85px;
  height: 28px;
  line-height: 28px;
  border-radius: 5px;
}
.nav{
  background-color: #b27272;
  padding:20px 20px;
}
.mid{
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  margin: 22px auto;
  padding-top: 60px;
  max-width: 40%;
  max-height: 700px;
  background-color: rgb(102 102 102 / 20%);
  text-align: center;
}
.word{
  padding-top: 20px;
  font-size: 40px;
}
.mean{
  padding-top: 20px;
  font-size: 23px;
  color: #666;
  /*text-decoration: underline;*/
  line-height: 60px;
}
.tip{
  font-size: 20px;
  line-height: 18px;
  color: black;
}
.selection{
  padding: 10px 80px;
  margin: 5px 100px;
  background-color: #a9ccf1;
  text-align: left;
  border-radius: 10px;
}
.el-button{
  width: 94px;
  height: 40px;
  font-size: 19px;
  margin: 80px auto;
}
.progress{
  margin: 20px 10px;
}
</style>

